<script setup>
import { useRouter } from "vue-router";

const router = useRouter();

const selectMale = (type) => {
  router.push("/small/camera?type=" + type);
};
</script>

<template>
  <div class="small">
    <div class="title">Character selection</div>
    <div class="male">
      <img src="@/assets/images/small/male.png" @click="selectMale(0)" />
    </div>
    <div class="female">
      <img src="@/assets/images/small/female.png" @click="selectMale(1)" />
      <img src="@/assets/images/small/female-r.png" @click="selectMale(2)" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.title {
  width: 100%;
  position: absolute;
  top: 8%;
  font-size: 60px;
  font-family: "stc-medium";
  color: #fff;
  text-align: center;
  line-height: 1;
}

.male {
  width: 100%;
  position: absolute;
  top: 25%;
  font-size: 0px;
  text-align: center;
  img {
    width: 300px;
  }
}

.female {
  width: 100%;
  position: absolute;
  top: 60%;
  font-size: 0px;
  text-align: center;
  img {
    width: 300px;
  }
  img:nth-child(1) {
    margin-right: 60px;
  }
}
</style>
